import React, { useState } from 'react'
import './App.css'
import './test.css'

const list = [
  { id: '1001', name: 'Vue' },
  { id: '1002', name: 'React' },
  { id: '1003', name: 'Javascript' },
]
const isLogin = true

const articleType = 1
function getArticleItem() {
  if (articleType === 0) {
    return <div className="back-ground-color">无图文</div>
  } else if (articleType === 1) {
    return <div className="back-ground-color">单图文</div>
  } else {
    return <div className="back-ground-color">多图文</div>
  }
}

//** on + 事件名称 = {事件处理程序} */  驼峰
function App() {
  // const handleClick=(e)=>{
  //   console.log('button 被点击了',e)
  // }
  // const handleClick=(name)=>{
  //   console.log('button 被点击了',name)
  const handleClick = (name, e) => {
    console.log('button 被点击了', name, e) //既要自定义传参，也要事件参数
  }

  /**如果是传递自定义参数，应该写成箭头函数的写法 */

  //Button组件
  function Button(props) {
    function buttonClick(name) {
      console.log(name)
    }
    return <button onClick={() => buttonClick(props.type)}>{props.name}</button>
  }

  //useState语法（数据驱动视图）const [count,setCount] = useState(0)
  let [count, setCount] = useState(0)

  //复杂对象
  let [form, setForm] = useState({ name: 'jack' })

  const handleAddCount = () => {
    setCount((count = count + 1))
  }
  const handlechangeForm = () => {
    setForm({ ...form, name: form.name === 'jack' ? 'join' : 'jack' })
  }

  const btnStyle = {
    color: 'pink',
    height: '25px',
    width: '83px',
    borderRadius: '5%',
  }
  return (
    <div className="App">
      <ul>
        {list.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      {!isLogin && <span>this is span</span>}

      {getArticleItem()}

      {/* <div><button onClick={handleClick}>我被点击了</button></div> */}
      <div>
        <button onClick={e => handleClick('jack', e)}>我被点击了</button>
      </div>

      <div>
        <Button name="description" type="Button"></Button>
      </div>

      <div>
        <button style={btnStyle} onClick={handleAddCount}>
          自增按钮{count}
        </button>
      </div>
      <div>
        <button onClick={handlechangeForm}>改变form{form.name}</button>
      </div>
    </div>
  )
}

export default App
